Use Device Mode to approximate how your page looks and performs on a mobile device.
Device Mode is the name for the loose collection of features in Chrome DevTools that help you simulate mobile devices. These features include:
- Simulating a mobile viewport
- Throttling the network
- Throttling the CPU
- Simulating geolocation
- Setting orientation
Limitations
Think of Device Mode as a first-order approximation of how your page looks and feels on a mobile device. With Device Mode you don't actually run your code on a mobile device. You simulate the mobile user experience from your laptop or desktop.
There are some aspects of mobile devices that DevTools will never be able to simulate. For example, the architecture of mobile CPUs is very different than the architecture of laptop or desktop CPUs. When in doubt, your best bet is to actually run your page on a mobile device. Use Remote Debugging to view, change, debug, and profile a page's code from your laptop or desktop while it actually runs on a mobile device.
Simulate a mobile viewport
Click Toggle Device Toolbar 
to open the UI that
enables you to simulate a mobile viewport.
By default the Device Toolbar opens in Responsive Viewport Mode.
Responsive Viewport Mode
Drag the handles to resize the viewport to whatever dimensions you need. Or, enter specific values
in the width and height boxes. In Figure 2, the width is set to 628 and the height is set to
662.
Show media queries
To show media query breakpoints above your viewport, click More options and then select Show media queries.
Click a breakpoint to change the viewport's width so that the breakpoint gets triggered.
Set the device type
Use the Device Type list to simulate a mobile device or desktop device.
The table below describes the differences between the options. Rendering method
refers to whether Chrome renders the page as a mobile or desktop viewport. Cursor icon
refers to what type of cursor you see when you hover over the page. Events fired refers
to whether the page fires touch or click events when you interact with the page.
| Option | Rendering method | Cursor icon | Events fired |
|---|---|---|---|
| Mobile | Mobile | Circle | touch |
| Mobile (no touch) | Mobile | Normal | click |
| Desktop | Desktop | Normal | click |
| Desktop (touch) | Desktop | Circle | touch |
Mobile Device Viewport Mode
To simulate the dimensions of a specific mobile device, select the device from the Device list.
Rotate the viewport to landscape orientation
Click Rotate 
to rotate the viewport to landscape orientation.
Note that the Rotate button disappears if your Device Toolbar is narrow.
See also Set orientation.
Show device frame
When simulating the dimensions of a specific mobile device like an iPhone 6, open More options and then select Show device frame to show the physical device frame around the viewport.
Add a custom mobile device
To add a custom device:
Click the Device list and then select Edit.
Figure 11. Selecting Edit Click Add custom device.
Enter a name, width, and height for the device. The device pixel ratio, user agent string, and device type fields are optional. The device type field is the list that is set to Mobile by default.
Figure 12. Creating a custom device
Show rulers
Click More options and then select Show rulers to see rulers above and to the left of your viewport. The sizing unit of the rulers is pixels.
Zoom the viewport
Use the Zoom list to zoom in or out.
Throttle the network and CPU
To throttle the network and CPU, select Mid-tier mobile or Low-end mobile from the Throttle list.
Mid-tier mobile simulates fast 3G and throttles your CPU so that it is 4 times slower than normal. Low-end mobile simulates slow 3G and throttles your CPU 6 times slower than normal. Keep in mind that the throttling is relative to the normal capability of your laptop or desktop.
Note that the Throttle list will be hidden if your Device Toolbar is narrow.
Throttle the CPU only
To throttle the CPU only and not the network, go to the Performance panel, click
Capture Settings 
, and then select
4x slowdown or 6x slowdown from the CPU list.
Throttle the network only
To throttle the network only and not the CPU, go the Network panel and select Fast 3G or Slow 3G from the Throttle list.
Or press Command+Shift+P (Mac) or
Control+Shift+P (Windows, Linux, Chrome OS) to open
the Command Menu, type 3G, and select Enable fast 3G throttling or
Enable slow 3G throttling.
You can also set network throttling from the Performance panel. Click
Capture Settings and then
select Fast 3G or Slow 3G from the Network list.
Override geolocation
To open the geolocation overriding UI click Customize and control DevTools
and then select
More tools > Sensors.
Or press Command+Shift+P (Mac) or
Control+Shift+P (Windows, Linux, Chrome OS) to open
the Command Menu, type Sensors, and then select Show Sensors.
Select one of the presets from the Geolocation list, or select Custom location to enter your own coordinates, or select Location unavailable to test out how your page behaves when geolocation is in an error state.
Set orientation
To open the orientation UI click Customize and control DevTools
and then select
More tools > Sensors.
Or press Command+Shift+P (Mac) or
Control+Shift+P (Windows, Linux, Chrome OS) to open
the Command Menu, type Sensors, and then select Show Sensors.
Select one of the presets from the Orientation list or select Custom orientation to set your own alpha, beta, and gamma values.
Feedback
See Join the DevTools community for other ways to leave feedback.